<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<style type="text/css">
		#myCanvas{
			background: skyblue;
		}
	</style>
</head>
<body>
	<canvas id="myCanvas" width="500" height="500"></canvas>
	<script type="text/javascript">
		var myCanvas = document.getElementById('myCanvas');
		
		var ctx = myCanvas.getContext('2d');
//		ctx.beginPath();
//		ctx.moveTo(0,100);  
//		ctx.lineWidth = '5';
//		ctx.strokeStyle  = 'red';
//		ctx.lineTo(100,100);
//		ctx.lineTo(100,10);
//		ctx.stroke();
//				
//		
//		ctx.beginPath();
//		ctx.strokeRect(10, 110, 200, 100);
//		ctx.beginPath();
//		ctx.fillStyle = 'yellow';
//		ctx.fillRect(15, 120, 190, 80);
//				
//		ctx.clearRect(0,0,800,800); 
//		ctx.beginPath();
//		ctx.font = '30px 宋体'
//		ctx.fillStyle = 'orange'
//		ctx.fillText("我女朋友",0,290)
//		
//		ctx.beginPath();
//		ctx.font = '60px Arial'
//		ctx.strokeStyle="red";
//      ctx.strokeText("我",0,390);
//      
//      
//       ctx.beginPath()
//       ctx.arc(50,250,20,Math.PI*3/2,Math.PI,true);
//       ctx.stroke();
//       ctx.closePath();
//      
//              
//      ctx.beginPath();
//      ctx.fillStyle="orange";
//      ctx.lineWidth = '50';
//		ctx.arc(200,100,50,0,Math.PI/2,false);
//		ctx.fill();
//		ctx.fillStyle="red";//填充颜色,默认是黑色
//		ctx.fill();//画实心圆
//		ctx.closePath();
//
////空心和实心的组合
//
//ctx.beginPath();
//ctx.arc(300,300,50,0,360,false);
//ctx.fillStyle="red";
//ctx.fill();
//ctx.strokeStyle="green";
//ctx.stroke();
//ctx.closePath();

//ctx.beginPath();
//ctx.font = '60px Arial'
//ctx.strokeStyle = 'red'
//ctx.strokeText("我", 110, 100); 

//      ctx.beginPath();
//      var lg=ctx.createLinearGradient(10,10,210,110);
//      lg.addColorStop(0,"red");
//      lg.addColorStop(1,"blue");
//      //带线性渐变矩形
//      ctx.fillStyle=lg;
//      ctx.fillRect(10,10,200,100);
   
        ctx.beginPath();
        ctx.strokeStyle = 'red';
        ctx.lineWidth = '2';
        ctx.moveTo(0,0);
        ctx.lineTo(0,10);
        ctx.lineTo(10,50);
        ctx.lineTo(50,30);
       
        ctx.lineTo(80,100);
        ctx.lineTo(100,10);
        ctx.lineTo(100,0);
        ctx.closePath();
        ctx.fill();
        
        
        ctx.lineTo(50,100);
        
        
        
		
	</script>
</body>
</html>